<script setup>
import { ref } from 'vue'
import FeatureItem from './components/FeatureItem.vue'
// 调用接口
import { homeSpecial } from '@/api/home'
import { lazyApi } from '@/utils/lazy'

// 获取最新专题列表
const specialList = ref([])
const getSpecialList = async () => {
  const res = await homeSpecial()
  specialList.value = res.data.result
}
const { target } = lazyApi(getSpecialList)

// 跳转页面顶部
const goTop = () => {
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="bodypanel4">
    <div class="containter">
      <div class="head" ref="target">
        <span style="font-size: 30px; margin-right: 1000px">最新专题</span>
        <div class="more">
          <span>查看全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <ul class="body">
        <li class="body-item" v-for="item in specialList" :key="item.id">
          <FeatureItem
            :cover="item.cover"
            :title="item.title"
            :summary="item.summary"
            :collectNum="item.collectNum"
            :viewNum="item.viewNum"
            :replyNum="item.replyNum"
            :lowestPrice="item.lowestPrice"
            @click="goTop"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bodypanel4 {
  width: 100%;
  height: 495px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  .containter {
    width: 1240px;
    height: 100%;
    .head {
      padding: 30px 0px;
      display: flex;
      align-items: center;
      .more {
        display: flex;
        align-items: center;
        color: #9f9f9f;
        cursor: pointer;
        &:hover {
          color: #27ba9b;
        }
      }
    }
    .body {
      list-style: none;
      display: flex;
      justify-content: space-between;
      margin: 0px;
      padding: 0px;
    }
  }
}
</style>
